<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
    width: 200px;
    height: 200px;
    background-color: pink;
    font-size: 50px;
}
</style>
</head>
<body>
<input type="text" id="input">
<button id="btn"> 开始计时</button>
<button id="btn1"> 停止计时</button>
<p id="p"></p>
<script>
var input = document.getElementById("input");
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var p = document.getElementById("p");
var timerId;
var minute = 0;
/*btn.onclick = function (){
    if (!minute){
        minute = parseInt(input.value) * 60;
    }
    p.innerHTML = minute;
    timerId = setInterval(function (){
        minute--;
        p.innerHTML = minute;
        setTimeout(function (){
            if (minute == 0){
                clearInterval(timerId)
                alert("计时结束, 马上爆炸");
            }
        }, 10)
    }, 50)
}*/
btn.onclick = function (){
    if (!minute){
        minute = parseInt(input.value) * 60;
    }
    p.innerHTML = minute;
    timerId = setTimeout(function step(){
        minute--;
        p.innerHTML = minute;
        if(minute == 0) return;
        timerId = setTimeout(step, 50)
    }, 50)
}
btn1.onclick = function (){
    clearInterval(timerId)
}
</script>
</body>
</html>
<!--
2. 输入一个分钟数，
开始倒计时。倒计时结束，
弹出"计时结束!",中间可以点击按钮停止倒计时。

-->